<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>12</div>
    <div>12</div>
    <div>12</div>
    <div>12</div>
    <div>12</div>
    <div>12</div>
    <button onclick="fun()">隐藏</button>

    <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
    </div>
    <button class="btn1">展开</button>
    <button class="btnn">停止</button>
    <button class="btn2">隐藏</button>
</body>
<script>
    //判断
    // try{
    //     alert(123)
    // }catch{
    //     console.log(4221);
    // }finally{
    //     console.log('wqe');
    // }




//anmate() 动漫效果     stop()停止动漫    $('.btnn').stop()
    $(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px",width:"300px"});
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px",width:"100px"});
  });
});


//toggle()  显示隐藏
function fun(){
    $('div').toggle()
}





//hide()隐藏    show()显示
// var i =1
// function fun(){
//     if(i==1){
//         $("div").hide()
//         i++
//     }else if(i!=1){
//         $("div").show()
//         i=1
//     }
// }


</script>
</html>